/**配置webpack 采用commonJs模块化 require引入 module导出
 * webpack分为5个基本要素
 * entry 入口 表示从哪里开始打包
 * output 输出 表示打包好之后以什么形式放在哪里
 * loader 加载器 因为webpack只能打包js和json文件，不能识别其他资源 
 * 所以需要使用loader帮助webpack识别并打包其他资源
 * plugin 插件 让webpack变得更强大的要素
 * mode 模式 分为开发模式和生产模式
 * 配置好后，如要打包，执行指令webpack即可
 * 注意 这里执行指令，不要用powershell， 而是用cmd来执行
 * powershell执行可能不会正常生成文件
*/

const {resolve} = require('path');
const HtmlWebpackPlugin = require('html-webpack-plugin');

module.exports = {
  // webpack配置项

  // 入口
  entry: './src/index.js',

  // 输出
  output: {
    // 输出路径  设置为绝对路径
    path: resolve(__dirname, 'build'),
    // 输出文件名
    filename: 'built.js',
  },

  // loader配置
  // webpack只能识别js和json，不能识别其他资源
  // 所以这里就要配置 让webpack能够识别其他资源并做打包
  // loader是倒序加载，即先加载下面的loader，再加载上面的loader。书写注意顺序
  module: {
    rules: [
      // {
      //   // test 正则表达式， 表示匹配哪些文件 
      //   test: /\.css$/,
      //   // use 表示使用哪些loader进行处理，让webpack能看懂
      //   use: [
      //     // style-loader是处理css样式的基础模块，必须使用
      //     // 意思是创建style标签，将js中的样式添加到head标签中使用
      //     'style-loader',
      //     // 将css文件变成commonJs模块加载到js文件中， 里面的内容是样式字符串
      //     'css-loader',
      //   ]
      // },
      {
        test: /\.less$/,
        // 使用loader的写法：
        // 如果只使用一个loader，可以写作loader: 'xxx-loader'
        // 如果使用多个loader，就要使用use:[]的形式，把loader写入数组里
        use: [
          // style-loader是处理css样式的基础模块，必须使用
          // 意思是创建style标签，将js中的样式添加到head标签中使用
          'style-loader',
          // 将css文件变成commonJs模块加载到js文件中， 里面的内容是样式字符串
          'css-loader',

          // 编译less文件，除了使用style-loader css-loader外，还需要使用less-loader
          'less-loader'
        ]
      },
      {
        test: /\.(jpg|png|gif)$/,
        loader: 'url-loader',
        // w5已经打算放弃url-loader了， 所以需要添加下面的type配置
        type: 'javascript/auto',
        options: { // 参数选项
          // 如果图片小于8kb，就会用base64编码处理，可以减少请求量，但是体积会变大
          limit: 8 * 1024, // 单位是b ， 乘以1024转化为kb
          // 关闭url-loader的es6模块化模式
          esModule: false,
          // name是打包后的图片名 
          // [hash:10].[ext] 表示hash值的前10位，后缀名为原有后缀
          // 如果原图未改变，且已经打包过，重新打包也不会改变原有打包的文件名
          name: 'img/[hash:10].[ext]'
          // 或者 name: 'img/[hash:10].[ext]' 这样会生成一个img文件夹 打包图片会放在img文件夹里
        }
      },
      {
        test: /\.html$/,
        // 用于处理html中的img图片,负责引入图片 
        // loader: 'html-loader'
        // 在w5中，用html-withimg-loader
        loader: 'html-withimg-loader'
      }
    ]
  },

  // plugin插件配置 
  // 有了plugin 才让webpack变得更加强大
  plugins: [
    // plugin配置

    // html-webpack-plugin 先安装 再引入 再使用
    // 作用是默认创建一个空的html文件，自动引入打包好的所有资源
    new HtmlWebpackPlugin({
      // 创建的html文件以'./src/index.html'文件为模板，并自动引入打包的资源
      template: './src/index.html'
    })
  ],

  //mode 模式 分为开发模式和生产模式
  mode: 'development', // 开发模式
  // mode: 'production' // 生产模式

  // 开发服务器配置
  // 文件内容发生变化时，会自动打包 自动刷新浏览器
  // w5之前版本启动devServer的指令： webpack-dev-server
  // w5版本启动指令 npx webpack server
  devServer: {
    contentBase: resolve(__dirname, 'build'),
    // 启动gzip压缩
    compress: true,
    // 在3000端口运行
    port: 3000,
    // open为true 表示会自动打开浏览器
    open: true
  }
}

